<template>
  <div class="radar-content" id="radar_content">
    <a-table
      class="crud-table"
      :columns="columns"
      :data-source="tableData"
      :pagination="false"
      :loading="loading"
      :scroll="{ x: '200px', y: tableHeight + 'px' }"
    />

    <div class="smart-query-table-page">
      <a-pagination
        show-less-items
        :defaultPageSize="queryForm.size"
        v-model:current="queryForm.current"
        v-model:pageSize="queryForm.size"
        :total="total"
        @change="onload"
        @showSizeChange="onload"
        :show-total="(total) => `共${total}条`"
      />
    </div>
  </div>
</template>
<script setup>
  import { ref, computed, watch, onMounted, reactive } from 'vue';
  import { api } from '/@/api/plat/ais-track.js';

  const props = defineProps({
    alarmInfo: {
      type: Object,
      default: () => {},
    },
  });
  const tableHeight = ref(0);
  const columns = [
    {
      title: 'MMSI',
      dataIndex: 'mmsi',
      width: 130,
    },
    {
      title: '纬度',
      dataIndex: 'latitude',
      width: 110,
    },
    {
      title: '经度',
      dataIndex: 'longitude',
      width: 110,
    },
    {
      title: '对地速度',
      dataIndex: 'speed',
      width: 90,
    },
    {
      title: '对地航向',
      dataIndex: 'course',
      width: 90,
    },
    {
      title: '艏向',
      dataIndex: 'heading',
      width: 110,
    },
    {
      title: '记录时间',
      dataIndex: 'dataTime',
      width: 180,
    },
  ];

  const tableData = ref([]);
  let loading = ref(false);
  const queryFormState = {
    current: 1,
    size: 20,
  };
  const total = ref(0);
  const queryForm = ref({ ...queryFormState });

  function queryData() {
    queryForm.value.current = 1;
    onload();
  }

  function onload() {
    const { size, current } = queryForm.value;
    loading.value = true;
    api
      .queryPage(
        Object.assign(
          {},
          { size, current },
          { mmsi: props.alarmInfo.targetId, startTime: props.alarmInfo.startTime, endTime: props.alarmInfo.endTime }
        )
      )
      .then(({ data }) => {
        tableData.value = data.records;
        total.value = data.total;
        loading.value = false;
      });
  }

  onMounted(() => {
    const mapElement = document.getElementById('radar_content');
    if (mapElement) {
      tableHeight.value = mapElement.offsetHeight - 32 - 64;
    }
    // 根据目标ID获取轨迹
    queryData();
  });

  defineExpose({});
</script>

<style lang="less" scoped>
  @import '/@/assets/style/table.less';
  .radar-content {
    height: 100%;
  }
</style>
